<template>
  <div class="audio-list">
    <!-- 音频列表 -->
    <div ref="mescroll" class="mescroll">
      <div class="tab">       
        <tab
          active-color = "#333333"
          default-color = "#ccc"
          custom-bar-width = "0"
          v-show="columns && columns.length > 0"
          >
          <tab-item v-for="(item, index) in columns" :selected="(index == 0) ? true: false" :key="index" @on-item-click="onItemClick(item.id)">{{item.title}}</tab-item>
        </tab>
        <div class="recommend">       
          <div class="item-list" v-for="(item, index) in audio_list" :key="index" @click="clickRouter(item.id)">
            <span class="num">{{index+1}}</span>
            <p class="title">{{item.title}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
import { Tab, TabItem } from 'vux'
import { getFreeAudio, get_column_cate, get_freeAudioLists_cate } from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
  components: {
    Aplayer,
    Tab, 
    TabItem
  },
  data () {
    return {
      audio_list: [],
      column_id: '',
      columns: [],
      cate_id: '',
      cate_ids: '',
    }
  },
  created () {
    this.id = this.$route.query.id
    if(this.$route.query.column_id){      
      this.column_id = this.$route.query.column_id
      this.cate_ids = this.$route.query.cate_id
      this.get_column_cates()
    }
  },
  mounted () {
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    clickRouter(itemId) {
      if(this.$route.query.column_id){
        this.router({path: './audioDetails', query:{id: itemId, is_three: false}})
      }else{
        this.router({path: './audioDetails', query:{id: itemId, is_three: true}})
      }
    },
    onItemClick (index) {
      this.cate_ids = index
      this.mescroll.resetUpScroll()
    },
    router (path) {
      this.$router.push(path)
    },
    upCallback (page) {
      if(this.$route.query.column_id){
        this.get_freeAudioLists_cates(page)
      }else{
        this.get_free_audio(page)
      }
    },
    get_column_cates () {
      get_column_cate(this.column_id).then((res) => {
        this.columns = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 没有3级分类的音频列表
    get_freeAudioLists_cates(page) {      
      get_freeAudioLists_cate(this.cate_ids, page.num, page.size).then((res) => {
        console.log(res)
        if(res.data.info == null){
          this.mescroll.endSuccess(0);
          return;
        }
        if (page.num == 1){
          this.audio_list = []
        }
        if(res.data == null){
          this.mescroll.endErr()
          return
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info.length);
        })
        this.audio_list = this.audio_list.concat(res.data.info)
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 有3级分类的音频列表
    get_free_audio(page) {
      getFreeAudio(this.id, page.num, page.size).then((res) => {
        if (page.num == 1){
          this.audio_list = []
        }
        if(res.data == null){
          this.mescroll.endErr()
          return
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.info.url.length);
        })
        this.audio_list = this.audio_list.concat(res.data.info.url)
      }).catch((err) => {
        console.dir(err)
      })
    }    
  }
}
</script>
<style lang="stylus" scoped>
.audio-list
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
  .recommend
    padding 0 1.5rem
    background-color #fff
    .item-list
      display flex
      padding-top 2rem
      .num
        font-size 1.6rem
        color #fff
        background-color #FF659B
        border-radius .4rem
        width 2.7rem
        height 2.7rem
        text-align center
        line-height 2.7rem
        max-width 2.7rem
        margin-right 2rem
      .title
        flex 1
        font-size 1.5rem
        font-weight bold
        line-height 2.7rem
        border-bottom 1px solid #e5e5e5
        padding-bottom 2rem
        width 100%
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
</style>